/**
 * 基于 MUI 提供的 上下拉刷新封装
 * 注意：本套刷新机制，与后端返回字段紧密相关联，比如：pageNo,pageSize,count等
 * 使用举例：
 * const pagination = {
        pageNo: 0, // 当前页码
        pageSize: 5 // 每页显示的条数
    }
    new InitPullRefresh('#pullrefresh', getList, pagination)

 * @param {String} domId 必传 '#pullrefresh'
 * @param {Function} getDataFn  必传 接口请求回调
 * @param {Object} pagination 选传 页码配置
 */
export const InitPullRefresh = function (domId, getDataFn, pagination, config) {
    config = config || {}
    this.dom = document.querySelector(domId);
    this.domId = domId;
    this.getListFn = getDataFn;
    // this.timer = null;
    // this.requestTimeout = ($constant && $constant.requestTimeout) ? $constant.requestTimeout : 2000;
    this.paginationData = {
        list: [],
        count: 'init', // 数据总条数
        pageNo: 0, // 当前页码
        pageSize: 5, // 每页显示的条数
    }
    for (let key in pagination) {
        // debugger
        if (key && this.paginationData.hasOwnProperty(key) && key !== 'count') {
            this.paginationData[key] = pagination[key]
        }
    }

    this.conf = {
        upContentrefresh: '正在加载...',
        upContentnomore: '没有更多数据了',
        upContentnomore1: '没有更多数据了',
        upContentnomore2: '--- 我也是有底线的 ---',
        // downLoadNum: 0, // 下拉刷新计数器
    }

    for (let key in this.conf) {
        if (key && config.hasOwnProperty(key)) {
            this.conf[key] = config[key]
        }
    }

    // debugger
    this.init()
}

InitPullRefresh.prototype = {
    init: function () {
        const _this = this

        !_this.scrollList && (_this.scrollList = _this.dom.querySelector('.mui-scroll'))

        if (!_this.noDataStatus) {
            _this.noDataStatus = document.createElement('div');
            _this.noDataStatus.classList.add('noData-box')
            const icon = document.createElement('div');
            // const text = document.createElement('span');
            icon.classList.add('iconfont', 'icon-noData');
            // text.classList.add('noData-text');
            // text.innerText = '没数据！'
            _this.noDataStatus.appendChild(icon)
            // _this.noDataStatus.appendChild(text)

            const exitDom = _this.dom.querySelector('.mui-pull-bottom-pocket')
            _this.scrollList.insertBefore(_this.noDataStatus, exitDom)
        }

        // debugger
        /**
         * 上下拉加载刷新 逻辑
        */
        mui.init({
            pullRefresh: {
                container: this.domId,
                down: {
                    style: 'circle',
                    callback: _this.pulldownRefresh.bind(_this)
                },
                up: {
                    auto: true, // 可选,默认false.自动上拉加载一次
                    height: 50, // 可选.默认50.触发上拉加载拖动距离
                    contentrefresh: this.conf.upContentrefresh, // 可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: this.conf.upContentnomore, // 可选，请求完毕若没有更多数据时显示的提醒内容
                    callback: _this.pullupRefresh.bind(_this)
                }
            }
        });
    },
    /**
     * 上拉加载
    */
    pullupRefresh: function () {
        const _this = this
        console.log('上拉')
        let isEnd = true // 是否已加载完毕 true:是 false:否
        if (_this.paginationData.count === 'init') {
            isEnd = false
        } else {
            isEnd = _this.paginationData.list.length >= _this.paginationData.count
        }
        // debugger
        setTimeout(function () {
            // debugger
            if (isEnd) {
                mui(_this.domId).pullRefresh().endPullupToRefresh(isEnd); //参数为true代表没有更多数据了。
                return
            }
            _this.paginationData.pageNo++
            // 数据接口请求
            _this.getListFn('up', res => {
                // debugger
                _this.getListCallBack(res) // 接口请求回调函数
                mui(_this.domId).pullRefresh().endPullupToRefresh(isEnd); //参数为true代表没有更多数据了。
            })
        }, 100);
    },
    /**
     * 下拉刷新具体业务实现
     */
    pulldownRefresh: function () {
        const _this = this
        console.log('下拉')
        _this.paginationData.pageNo = 1
        _this.paginationData.list = []
        setTimeout(function () {
            // 数据接口请求
            _this.getListFn('down', res => {
                _this.getListCallBack(res) // 接口请求回调函数
                mui(_this.domId).pullRefresh().endPulldownToRefresh(); //refresh completed
                mui(_this.domId).pullRefresh().refresh(true);
            })
            // _this.conf.downLoadNum++;

        }, 100);
    },
    /**
     * 接口请求回调函数
    */
    getListCallBack(res) {
        const _this = this
        res.count = Number(res.count)
        _this.paginationData.count = res.count
        _this.paginationData.list = _this.paginationData.list.concat(res.data)
        !_this.pullBottom && (_this.pullBottom = _this.dom.querySelector('.mui-pull-bottom-pocket'))

        if (res.count === 0) { // 首次刷新，没数据会执行
            _this.noDataStatus.style.display = 'block'
            // console.log('首次刷新，没数据会执行')
            setTimeout(() => {
                _this.pullBottom.classList.add('mui-visibility')
                let captionDownDom = _this.pullBottom.querySelector('.mui-pull-caption-down');
                captionDownDom && (captionDownDom.innerHTML = _this.conf.upContentnomore)
            }, 300)
            return
        } else {
            _this.noDataStatus.style.display = 'none'
        }
    }
}
window.InitPullRefresh = InitPullRefresh;
